<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="h" uri="/syzg-html"%>
<%@page import="com.zenithsun.pic.picsubject.model.Picsubject"%>
<%
	Picsubject picsubject = (Picsubject)request.getAttribute("picsubject");
%>
<!DOCTYPE html>
<html>
	<head>
		<%@ include file="/base/jsp/common/CommonListTop.jsp"%>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>[菜单名(或大模块名)-模块名]</title>
		<link href="${ctx}/base/css/common.css" rel="stylesheet" type="text/css" />
		<link href="${ctx}/base/css/${customTheme}.css" rel="stylesheet" type="text/css" />
		<link href="${ctx}/baseNew/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    	<link href="${ctx}/baseNew/other/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
		<link rel="stylesheet" href="${ctx}/baseNew/dist/css/AdminLTE.min.css">
  		<link rel="stylesheet" href="${ctx}/baseNew/validator/css/bootstrapValidator.css"/>
		
		<script src="${ctx}/baseNew/plugins/jQuery/jQuery-2.2.0.min.js"></script>
		<script src="${ctx}/base/js/base.js" type="text/javascript"></script>
		<script src="${ctx}/base/js/common/FormFunction.js" type="text/javascript"></script>
		<script src="${ctx}/baseNew/bootstrap/js/bootstrap.js" type="text/javascript"></script>
		<script src="${ctx}/baseNew/other/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
		<script src="${ctx}/baseNew/other/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
		<script src="${ctx}/baseNew/other/js/bootbox.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="${ctx}/baseNew/validator/js/bootstrapValidator.js"></script>
		
		<link rel="stylesheet" href="${ctx}/base/imgsel/css/style.css"/>
		<%--新增样式处理 start--%>
		<link rel="stylesheet" href="${ctx}/zenithsun/css/admin-imgList.css"/>
		<!-- 公用的按钮函数 -->
		<script>
			var viewUrl = "${ctx}/path/picdetail/viewPicdetailShare";//表单列表view的url地址
			var listUrl = "${ctx}/path/picdetail/listPicdetail";//表单列表list 的url地址,用来作为搜索地址
 			var picsubjectId = "<%=picsubject.getId()%>";
			function defaultEvent(eventType,width,height) {
				FormFunction.defaultEvent(eventType,width,height);//默认的处理函数，需自定义时自己写 在PublicFunction.js里
			}
			
			
			//全选功能
			function selectAllListImage(t){
				//改变按钮的内容
				var flag=false;
				t=$(t);
				if(t.html()=="全部选择"){
					t.html("取消全选");
					flag=true;
				}else{
					t.html("全部选择");
					flag=false;
				}
				
				selectAll(flag);
				
				var selectedRow = $("li[name='liSelectItem']");
				for (i=0;i<selectedRow.length;i++){
					var selectItem=selectedRow[i];
					if(selectItem!=undefined){
						selectItem=$(selectItem);
						lmselect(selectItem,flag);
					}
				}
			}
			function noImage(t){
				t.src="${ctx}/zenithsun/news/mobile/images/Default-bg270x180.png"; 
				t.onerror=null;
			}
		</script>
	</head>
<body class="rightBody">
		<form name="searchForm" id="searchForm" method="post" action="" class="form-inline">
			<table width="100%" class="title" border="0" cellspacing="0" cellpadding="0">
				<tr>
				  <th>
				    <img src="${ctx}/zenithsun/images/back.png" width="26" height="26" alt="图标 " class="icon" />
				  	图片资源库管理&nbsp;>&nbsp;
				  	<a href="${ctx}/path/picsubject/shareListPicsubject" title="我的图片库"><b>共享图片库</b></a>&nbsp;&gt;&nbsp;
				  	<b>${picsubject.name}</b>
				  </th>
				  <th width="500"></th>
				</tr>
				<tr>
				  <td>
				    <div class="form-group">
				    </div>
				  </td>
				  <td align="right">
				    <div class="form-group">
				    	<c:if test="${picsubject.allowDown eq 1 }">
				    		<button type="button" class="btn btn-primary btn-sm" onclick="downloadPictures('${picsubject.id}')"><i class="fa fa-download"></i>下载图集</button>
				    	</c:if>
				    </div>
				  </td>
				</tr>
			</table>
			
			<div class="picList" style="height:350px;overflow: auto;">
			<input type="hidden" name="opType" id='opType' value="notall">
			  <ul id="listImageUL">
			      <c:forEach items="${lstPicdetail }" var="picdetail">
			      	
			  		<li name="liSelectItem" onmousemove="lmmve(this)" onmouseout="lmmot(this)" onclick="lmmck(this)">
			  		  <dl>
			  		    <dd class="mod-itemsContent">
			  		      <div id="div_${picdetail.id }">
			  		      	<c:if test="${not empty picdetail.thumbnailPath }">
			  		      		<img src="${ctx }${picdetail.thumbnailPath }" onerror="noImage(this)">
			  		      	</c:if>
			  		      	<c:if test="${empty picdetail.thumbnailPath }">
			  		      		<img src="${ctx }${picdetail.path }" onerror="noImage(this)">
			  		      	</c:if>
			  		      	<em class="picture-num j-numSize"></em>
			  		      </div>
						  <div class="picList-editGrid-wrap j-popShow" style="height: 150px;"></div>
						 
			  		      <div class="picList-editGrid j-popShow">
			  		       <input style="display: none;" type="checkbox" name="selectedRow" value="${picdetail.id }" />
			  		      <input type="hidden" id="path_${picdetail.id }" value="${ctx }${picdetail.thumbnailPath }">
			  		      <input type="hidden" id="${picdetail.id }" class="j-selectId" value="true">
			  		      <input type="hidden" name="ids" value="${picdetail.id }">
			  		        <a style="float: left; left: 90px;" href="javascript:FormFunction.showViewModal('${picdetail.id }')" title="图片信息"><i class="fa fa-info"></i> </a>
			  		      </div>
			  		       
			  		    </dd>
			  		  </dl>
				    </li>
				  </c:forEach>
			  </ul>
			  <!-- save sort order here which can be retrieved on server on postback -->
			  <input name="list1SortOrder" type="hidden" />
			  
			</div>
		</form>
<div id="myDlg"></div>
<%@ include file="/base/jsp/common/CommonListFoot.jsp"%>
<script src="${ctx}/base/imgsel/js/img.js" type="text/javascript"></script>
<script src="${ctx}/zenithsun/js/jquery.dragsort-0.5.1.js" type="text/javascript"></script>
<script src="${ctx}/zenithsun/js/run.js" type="text/javascript"></script>
<script type="text/javascript">
		//此为图片列表鼠标经过时编辑事件
		function lmmve(obj){
			$(obj).find(".j-popShow").show();
		}
		//此为图片列表鼠标经过时删除事件
		function lmmot(obj){
			$(obj).find(".j-popShow").hide();
		}
		//此为图片列表鼠标经过时点击选中事件
		function lmmck1(obj){
			$(obj).find("div").toggleClass('selected');
			var objBtn = $(obj).find("input:checkbox");
			if(objBtn.prop('checked')){
				objBtn.prop('checked', false);
			} else {
				objBtn.prop('checked', true);
			}
		}
		//此为图片列表鼠标经过时点击选中事件
		function lmmck(obj){
			$(this).toggleClass('selected');
			$(obj).find("div").toggleClass('selected');
			var objBtn = $(obj).find(".j-selectId");
			var objBtnVal = objBtn.val();
			var selId = objBtn.prop("id");
			var selPath = $("#path_" + selId).val();
			if(objBtnVal=="true"){
				objBtn.val(false);
				$("#sel_" + selId).remove();
				$(obj).parents("li").removeClass('selected');
	    		$(obj).parents(".select").removeClass('selected');
			} else if(objBtnVal=="false") {
				objBtn.val(true);
				var hNode = "<input type=\"hidden\" id=\"sel_" + selId + "\" name=\"selectedDetails\" value=\"" + selId + "|" + selPath + "\"/>";
				$("#" + selId).parent().append(hNode);
				if ($(obj).parents("li.selected").length == 0) {
				    $(obj).parents("li").addClass('selected');
				    $(obj).parents(".select").addClass('selected');
				}
			}
			//counter();
			//alert(checkItem.id+":"+checkItem.checked);
		}
		
		//此为图片列表鼠标经过时点击选中事件
		function lmselect(obj,flag){
			var objBtn = $(obj).find(".j-selectId");
			var objBtnVal = objBtn.val();
			var selId = objBtn.prop("id");
			var selPath = $("#path_" + selId).val();
			if(!flag){//取消全选
				$("#sel_" + selId).remove();
		    	$(this).removeClass('selected');
				$(obj).find("div").removeClass('selected');
			} else{//全部全选
				$(this).addClass('selected');
				$(obj).find("div").addClass('selected');
				var hNode = "<input type=\"hidden\" id=\"sel_" + selId + "\" name=\"selectedDetails\" value=\"" + selId + "|" + selPath + "\"/>";
				$("#" + selId).parent().append(hNode);
			}
			objBtn.val(flag);
			//counter();
			//alert(checkItem.id+":"+checkItem.checked);
		}
		function downloadPictures(picsubjectId){
			var chk_value = new Array(); 
			var option = $("#opType").val()
			$('input[name="selectedRow"]:checked').each(function(){ 
					chk_value.push($(this).val());
			});
			if(chk_value.length==0){
				window.alert("请选择需要下载的图片！！！");
				return;
			}else{
				location.href="${ctx}/path/picdetail/downPictures?picsubjectId="+picsubjectId+"&ids="+chk_value+"&op="+option;
			}
			
		}
	</script>
	</body>
</html>
